<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2022-04-23 17:36:44
 * @LastEditors: sueRimn
 * @LastEditTime: 2022-04-23 22:33:39
-->
<template>
  <el-dialog
    :title="'检修记录'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="900px"
  >
    <el-table
      ref="singleTable"
      :data="dataList"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="index"> </el-table-column>
      <el-table-column property="name" label="商家">
        <template slot-scope="scope">
          <span>{{ scope.row.shop.name }}</span>
        </template>
      </el-table-column>

      <el-table-column property="name" label="商家店铺地址">
        <template slot-scope="scope">
          <span>{{ scope.row.shop.address }}</span>
        </template>
      </el-table-column>

      <el-table-column property="name" label="商家联系方式">
        <template slot-scope="scope">
          <span>{{ scope.row.shop.contactInfo }}</span>
        </template>
      </el-table-column>

      <el-table-column property="name" label="车主姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.user.userRealname }}</span>
        </template>
      </el-table-column>

      <el-table-column property="name" label="车主联系方式">
        <template slot-scope="scope">
          <span>{{ scope.row.user.userPhone }}</span>
        </template>
      </el-table-column>

      <el-table-column property="name" label="维修价格">
        <template slot-scope="scope">
          <span>{{ scope.row.price }}</span>
        </template>
      </el-table-column>

      <el-table-column property="name" label="是否缴费">
        <template slot-scope="scope">
          <span>{{ scope.row.paid === "1" ? "是" : "否" }}</span>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="250"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="HandleJiaofei(scope.row.repairId)"
            >缴费</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
    </span>

    <jiaofei
      v-if="jiafeivisible"
      ref="jiaofeiUpdate"
      @refreshDataList="handeJiaofei"
    ></jiaofei>
  </el-dialog>
</template>

<script>
import _ from "lodash";
import jiaofei from "./jiaofei";
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        carId: ""
      },
      currentRow: null,
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      totalPage: 0,
      jiafeivisible: false
    };
  },
  components: {
    jiaofei
  },
  methods: {
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.getDataList();
    },
    getDataList() {
      this.$http({
        url: this.$http.adornUrl(`/repair/list`),
        method: "post",
        data: this.$http.adornParams({
          carId: this.dataForm.carId,
          pageSize: this.pageSize,
          pageNo: this.pageNo
        })
      }).then(({ data }) => {
        if (data && data.code === 200) {
          this.dataList = data.data.list;
          this.totalPage = data.data.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
      });
    },
    init(id) {
      this.dataForm.carId = id || 0;
      this.visible = true;
      this.getDataList();
    },
    handeJiaofei() {
      this.jiafeivisible = false;
      this.init(this.dataForm.carId);
    },
    HandleJiaofei(repairId) {
      this.jiafeivisible = true;
      this.$nextTick(() => {
        this.$refs.jiaofeiUpdate.init(repairId, this.dataForm.carId);
      });
    }
  }
};
</script>
